<template>
  <div id="private-page">
    <app-header/>
    <div class="userinfo" v-if="userInfo">
      <img :src="userInfo.avatar" alt="">
      <div class="info">
        <span>{{userInfo.userName}}</span>
        <div class="not-bonus" v-if="!userInfo.firstRecharge">
          未分红账户
          <img @click="check_img" src="../../assets/img/help.png" alt="">
          <p v-if="account">分红账户可参与平台分红，未分红账户不参与平台分红。您只要首次充值大于等于0.1ETH，或者充值大于等于1ETH，即可激活用户，参与每日平台分红。</p>
        </div>
        <div class="bonus" v-if="userInfo.firstRecharge">
          分红账户
        </div>
      </div>
    </div>
    <div class="table_msg">
      <ul>
        <li>
          <span v-if="listData">{{listData.total}}ETH</span>
          <span v-if="listData">{{listData.totalRank}}</span>
          <span v-if="listData">{{listData.yesterday}}ETH</span>
          <span v-if="listData">{{listData.yesterdayRank}}</span>
        </li>
        <li>
          <span>累计分红</span>
          <span>累计排名</span>
          <span>昨日分红</span>
          <span>昨日排名</span>
        </li>
      </ul>
    </div>
    <ul class="nav_tab">
      <li :class="activeNav==='assets'?'active':''" @click="handleJump('assets')">我的资产</li>
      <li :class="activeNav==='detail'?'active':''" @click="handleJump('detail')">流水明细</li>
      <li :class="activeNav==='profits'?'active':''" @click="handleJump('profits')">我的分红</li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
  import {Toast} from 'vant'
  import Header from '@/components/component/header.vue'
  import TableList from '@/components/component/table_list.vue'
  import Api from '@/axios'

  export default {
    name: 'private-page',
    data() {
      return {
        activeNav: 'assets',
        bonus: false,
        account: false,
        listData: null
      }
    },
    components: {
      'app-header': Header,
      'app-tableList': TableList
    },
    computed: {
      userInfo() {
        return this.$store.state.user.userInfo
      }
    },
    created() {
      let currentRoute = this.$route.path
      this.activeNav = currentRoute.replace('/', '')
    },
    watch: {
      $route(to, from) {
        let currentRoute = to.path
        this.activeNav = currentRoute.replace('/', '')
      }
    },
    methods: {
      getHeaderdata() {
        Api.getPrivatehead().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.listData = result.data
          } else {
            Toast(result.message)
            if (result.code === 1002) {
              this.$router.push({
                path: '/login'
              })
            }
          }
        })
      },
      check_img() {
        this.account = !this.account
      },
      // 按钮点击事件
      handleJump(index) {
        this.activeNav = index
        this.$router.push({
          path: '/' + index
        })
      }
    },
    mounted() {
      this.getHeaderdata()
    }
  }
</script>

<style lang="less" scoped>
  #private-page {
    width: 100%;
    height: auto;
    padding-bottom: 45px;
    display: block;
    overflow: hidden;
    .userinfo {
      display: flex;
      padding: 45px 24px;
      > img {
        width: 89px;
        height: 89px;
        border-radius: 50%;
        margin-right: 20px;
      }

      .info {
        position: relative;

        > span {
          height: 45px;
          color: #fff;
          font-size: 32px;
          display: block;
          line-height: 45px;
        }

        .not-bonus {
          font-size: 22px;
          background: #8C8C8C;
          border-radius: 10px;
          color: #FFFFFF;
          width: 148px;
          height: 34px;
          text-align: center;
          line-height: 34px;
          margin-top: 12px;
          display: block;
          position: relative;

          > p {
            left: 0px;
            padding: 26px 24px;
            font-size: 24px;
            color: #FFFFFF;
            text-align: justify;
            position: absolute;
            width: 332px;
            background: #354565;
            border-radius: 10px;
            top: 50px;

            &
            :after {
              content: '';
              position: absolute;
              width: 20px;
              height: 20px;
              background: #354565;
              top: -10px;
              transform: rotate(226deg);
              border-radius: 5px;
            }

          }
          > img {
            width: 30px;
            height: 30px;
            background-size: 100% 100%;
            position: absolute;
            left: 110%;
            top: 2px;
          }

        }
        .bonus {
          font-size: 22px;
          background: #0C1C3B;
          border-radius: 10px;
          color: #FFFFFF;
          border: 2px solid #F1D487;
          width: 148px;
          height: 34px;
          text-align: center;
          line-height: 32px;
          margin-top: 12px;
          display: block;
        }
      }
    }
    .table_msg {
      border-bottom: 10px solid #1E3054;
      ul {
        padding: 0px 24px 40px 24px;
        li {
          display: flex;
          justify-content: space-between;
          font-size: 22px;
          color: #9F9F9F;
          line-height: 30px;
          &:first-child {
            color: #fff;
            line-height: 40px;
            padding: 16px 0;
          }
        }
      }
    }
    .nav_tab {
      padding: 0 24px;
      display: flex;
      margin: 40px 0 16px 0;
      li {
        width: 148px;
        height: 68px;
        background: #1E3054;
        border-radius: 10px;
        font-size: 24px;
        margin-right: 24px;
        color: #FFFFFF;
        line-height: 68px;
        text-align: center;
        overflow: hidden;
      }
      .active {
        background: #BD9852;
      }
    }
  }
</style>
